import Vue from "vue";
import VueRouter from "vue-router";
import NProgress from "nprogress";
import Home from "../views/Home.vue";
import layout from "../layout/index.vue";
import Form from "@/views/Form.vue";
import onFound from "@/views/404.vue";
import BaseForm from "@/views/BaseForm.vue";
import tree_base from "@/views/tree/base.vue";
import tree_index from "@/views/tree/index.vue";
import tree_table from "@/views/tree/table.vue";
import update_index from "@/views/update/index.vue";
import entry_index from "@/views/entry/index.vue";
import login from "@/views/login.vue";
import store from "../store/index";
import parent from "@/layout/viewrouter.vue";
let originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

//  处理路由替换的警告提示问题
let originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function push(location) {
  return originalReplace.call(this, location).catch((err) => err);
};
Vue.use(VueRouter);
const whitelist = ["/login"];

export const nav1 = [
  {
    path: "/homenav1",
    name: "Home",
    component: layout,
    redirect: "/home/index",
    meta: {
      icon: "user",
      title: "表单管理",
      cache: true,
    },
    children: [
      {
        path: "/homenav1/index",
        component: Home,
        name: "home_index",
        meta: {
          title: "表格",
          cache: true,
          icon: "user",
        },
      },
      {
        path: "/homenav1/home_form",
        component: Form,
        name: "home_form",
        meta: {
          title: "表单模型",
          cache: true,
          icon: "user",
        },
      },
      {
        path: "/homenav1/home_base",
        component: BaseForm,
        name: "home_base",
        meta: {
          title: "基础表单",
          cache: true,
          icon: "user",
        },
      },
    ],
  },
];
export const nav3 = [
  {
    path: "/treenav3",
    name: "tree",
    component: layout,
    redirect: "/tree/tree_index",
    meta: {
      icon: "user",
      title: "权限管理",
      cache: false,
    },
    children: [
      {
        path: "/treenav3/tree_index",
        component: tree_table,
        name: "tree_index",
        meta: {
          title: "权限树",
          cache: false,
          icon: "user",
        },
      },
      {
        path: "/treenav3/table",
        component: tree_index,
        name: "tree_table",
        meta: {
          title: "表单模型",
          cache: false,
          icon: "user",
        },
      },
      {
        path: "/treenav3/BaseForm",
        component: tree_base,
        name: "tree_base",
        meta: {
          title: "基础表单",
          cache: false,
          icon: "user",
        },
      },
    ],
  },
];

export const routes = [
  {
    path: "/home",
    name: "Home",
    component: layout,
    redirect: "/home/index",
    meta: {
      icon: "user",
      title: "表单管理",
      cache: true,
    },
    children: [
      {
        path: "/home/index",
        component: Home,
        name: "home_index",
        meta: {
          title: "表格",
          cache: true,
          icon: "user",
        },
      },
      {
        path: "/home/home_form",
        component: Form,
        name: "home_form",
        meta: {
          title: "表单模型",
          cache: true,
          icon: "user",
        },
      },
      {
        path: "/home/home_base",
        component: BaseForm,
        name: "home_base",
        meta: {
          title: "基础表单",
          cache: true,
          icon: "user",
        },
      },
    ],
  },

  {
    path: "/tree",
    name: "tree",
    component: layout,
    redirect: "/tree/tree_index",
    meta: {
      icon: "user",
      title: "权限管理",
      cache: false,
    },
    children: [
      {
        path: "/tree/tree_index",
        component: tree_table,
        name: "tree_index",
        meta: {
          title: "权限树",
          cache: false,
          icon: "user",
        },
      },
      {
        path: "/tree/table",
        component: tree_index,
        name: "tree_table",
        meta: {
          title: "表单模型",
          cache: false,
          icon: "user",
        },
      },
      {
        path: "/tree/BaseForm",
        component: tree_base,
        name: "tree_base",
        meta: {
          title: "基础表单",
          cache: false,
          icon: "user",
        },
      },
    ],
  },
  {
    path: "/update",
    name: "update",
    component: layout,
    redirect: "/update/index",
    meta: {
      icon: "user",
      title: "更新实例",
      cache: false,
    },
    children: [
      {
        path: "/update/index",
        component: parent,
        name: "update_index",
        meta: {
          title: "修改表格",
          cache: false,
          icon: "user",
        },
        children: [
          {
            path: "/update/index/test1",
            meta: {
              title: "修改表格测试1",
              cache: false,
              icon: "user",
            },
            name: "update_index_test1",
            component: {
              render: function (h) {
                return h("div", {}, "123");
              },
            },
          },
          {
            path: "/update/index/test2",
            name: "update_index_test2",
            meta: {
              title: "修改表格测试2",
              cache: false,
              icon: "user",
            },
            component: {
              render: function (h) {
                return h("div", {}, "12322");
              },
            },
          },
        ],
      },
    ],
  },
];
export const router_list = [
  {
    path: "/login",
    component: login,
    meta: {
      icon: "user",
      title: "入口",
      cache: false,
    },
  },
  {
    path: "/404",
    component: onFound,
  },
  {
    path: "/entry",
    name: "entry",
    component: layout,
    redirect: "/entry/index",
    meta: {
      icon: "user",
      title: "",
      cache: false,
    },
    children: [
      {
        path: "/entry/index",
        component: entry_index,
        name: "entry_index",
        meta: {
          icon: "user",
          title: "工作台",
          cache: false,
        },
      },
    ],
  },
];
let mode;
let env = process.env.NODE_ENV;
if (env === "production") {
  mode = "hash";
}
if (env === "development") {
  mode = "history";
}
if (env === "nginx") {
  mode = "history";
}
export const router = new VueRouter({
  // mode: process.env.NODE_ENV === "production" ? "hash" : "history", // history 待测试
  mode: "history",
  base: process.env.BASE_URL,
  routes: router_list, // [...routes, ...router_list]
});

const createRouter = () => router;

// const resetRouter = () => {
//   let router = createRouter();
//   router.matcher = newRouter.matcher;
// };
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher; // reset router
}

router.beforeEach((to, from, next) => {
  NProgress.start();
  if (whitelist.indexOf(to.path) !== -1) {
    next();
  }
  if (!!sessionStorage.getItem("user") === false) {
    next({ path: "/login" });
  } else {
    let token = store.state.user;
    // 放置一个vuex的变量来控制浏览器刷新
    // 如果重新加载浏览器必然是不会报错变量也就是为空
    // 如果没有刷新浏览器 那就是值存在 也就是 路由资源加载成功
    // 如果值被浏览器刷新 就会重新加载 如果没有next就会访问路由资源路径
    if (token) {
      console.log(to.query, "token query");
      // if (to.path === "/" && to.query.id) {
      //   router.replace({
      //     path: "/entry/index",
      //     query: {
      //       id: to.query.id,
      //     },
      //   });
      // }
      // if (to.path === "/") {
      //   router.replace({
      //     path: "/entry/index",
      //     query: {
      //       id: "2",
      //     },
      //   });
      // }
      next();
    } else {
      sessionStorage.setItem("token", "123456");
      store.commit("set_user", "admin");
      let router1;
      let nav;
      // if (sessionStorage.getItem("id")) {
      //   to.query.id = sessionStorage.getItem("id");
      // } else {
      //   sessionStorage.setItem("id", to.query.id);
      // }
      // to.query.id = sessionStorage.getItem("key");
      if (to.query.id) {
        let id = to.query.id;
        resetRouter();
        if (id === "1") {
          nav = nav1;
          router1 = [...routes, ...nav1];
        }
        if (id === "3") {
          nav = nav3;
          router1 = [...routes, ...nav3];
        }
        if (id === "2") {
          nav = routes;
          router1 = [...routes, ...router_list];
          router1.push({
            path: "*",
            redirect: "/404",
          });
        }
      } else {
        nav = routes;
        router1 = [...routes, ...router_list];
        router1.push({
          path: "*",
          redirect: "/404",
        });
      }
      console.log(nav, "nav");
      sessionStorage.setItem("routes", JSON.stringify(nav));

      router.addRoutes(router1);
      next({ ...to, replace: true });
    }
  }
});
router.afterEach((to, from) => {
  NProgress.done();
});
export default router;
